const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // 入口文件
  entry: './src/index.js',
  
  // 输出配置
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true, // 每次构建前清理dist目录
  },
  
  // 模块处理规则
  module: {
    rules: [
      // 处理 less 资源
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader'],
      },
      
      // 处理 css 资源
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'], 
      },
      
      // 处理图片资源 (修正后的正则表达式)
      {
        test: /\.(jpg|png|gif)$/,
        type: 'asset',
        generator: {
          filename: 'static/images/[hash][ext]', // 图片输出路径
        },
        parser: {
          dataUrlCondition: {
            maxSize: 8 * 1024, // 8kb以下转为base64
          },
        },
      },
      
      // 处理 HTML 中的图片资源 (关键添加项)
      {
        test: /\.html$/,
        use: ['html-loader'] // 解析HTML中的图片引用
      }
    ]
  },
  
  // 插件配置
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Webpack页面', // HTML标题
      template: './src/index.html', // 自定义模板
      filename: 'index.html', // 输出文件名
      inject: 'body', // JS注入位置
      minify: true, // 生产模式自动压缩
      meta: {
        viewport: 'width=device-width, initial-scale=1',
        description: 'Webpack生成的页面'
      }
    })
  ],
  
  // 开发模式配置
  mode: 'development',
  
  // 开发服务器配置（可选）
  devServer: {
    static: {
      directory: path.join(__dirname, 'dist'),
    },
    compress: true,
    port: 3000,
    open: true,
    hot: true, // 热模块替换
  }
};